<template>
	<scroll-view
		scroll-x="true"
		:scroll-with-animation="true"
		:show-scrollbar="false"
		:scroll-left="scrollLeft"
		class="tab-list"
	>
		<view
			class="tab-item"
			v-for="(item, index) in list"
			:key="index"
			:class="[{ active: active === index }]"
			@tap="tabChange(index)"
		>
			{{ item.label }}
			<view class="line"></view>
		</view>
	</scroll-view>
</template>

<script>
export default {
	name: 'Tab',
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {
			active: 0,
			scrollLeft: 0
		};
	},
	methods: {
		tabChange(index) {
			this.active = index;
			this.scrollLeft = (this.active - 1) * 40;
			this.$emit('tabChange', index);
		}
	}
};
</script>

<style lang="scss" scoped>
.tab-list {
	width: 100%;
	white-space: nowrap;
	background: #ffffff;
	text-align: center;
	z-index: 10;
	.tab-item {
		display: inline-block;
		padding: 20rpx 26rpx;
		font-size: 28rpx;
		color: #171717;
		transition: 0.3s;
		position: relative;
		.line {
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -20rpx;
			width: 40rpx;
			height: 8rpx;
			background: $main-color;
			border-radius: 50rpx;
			opacity: 0;
			transition: 0.3s;
		}
		&.active {
			color: $main-color;
			.line {
				opacity: 1;
			}
		}
	}
}
</style>
